<template>
  <div class="w-100 h-100">
    <div style="width: 100; height: 10%" class="d-flex justify-content-end">
      <FakeLegend
      style="margin: auto 30px auto 0px"
        :color="colorSingleList"
        :text="['地下蓄水池', '塑膜蓄水模块',]"
      >
      </FakeLegend>

    </div>
    <div class="bottom">
      <div id="xu1" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useFunc } from "@/hook/useFunc";
import { useOptions } from "@/hook/useOptions";
const props = defineProps({
  allData: {
    type: Object,
    default: () => ({}),
  },
  selectValue: {
    type: Number,
    default: 2024,
  },
});
const colorSingleList = [
  "rgba(3, 230, 254, 1)",
  "rgba(184, 235, 143, 1)",

];

const current = computed(() => {
  
  let data = [[], []];
  try {
    data = props.allData[props.selectValue];
  } catch (error) {}

  return data;
});
let myChart: any;

watch(
  () => current.value,
  (val) => {
    
    if (val) {
      myChart.setOption({
        series: [{ data: val[0] }, { data: val[1] }],
      });
    }
  }
);

const value = useOptions().nowYear();

onMounted(() => {
  let option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",
      textStyle: {
        color: "white",
        fontSize: 20,
      },

    },    
    grid: {
    left: '10%', // 根据实际情况调整，增加这个值
    right: '4%',
    bottom: '10%',
    top:'0%',
    containLabel: true
},
    yAxis: {
        type: 'category',
        name: '百分比', // 在这里设置你的单位
    nameLocation: 'end', // 将单位放在轴的末端（最上方）
    nameTextStyle: { // 单位样式设置
        color: '#fff',
        fontSize: 20,
        padding: [0, 0, 10, -10] // 调整单位位置，数组格式为[top, right, bottom, left]
    },
        data: ['居住区', '工业区', '市政公共区'],
        axisTick: false,
        axisLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            },
        },
        axisLabel: {
      interval: 0,
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
      color: "#667A8E",
    },
  
    },
    xAxis: {
      // name:'%',
        min: 0,
        max: 100,
        interval: 25,
        type: 'value',
        axisLine: { show: false },
        splitLine: {
          lineStyle: {
                color: 'rgba(92,225,255,0.5)', // 设置分割线颜色为蓝色
            }
        },
        axisLabel: {
      interval: 0,
      formatter: "{value}" +'%',
          fontSize: 20,
          color: "#667A8E",

    },
    },
    series: [
        {
            name: '地下蓄水池',
            type: 'bar',
            barWidth: 10,
            data: [],
            // z: 2,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1, // 横向渐变
                    y2: 0,
                    colorStops: [
                        { offset: 1, color: 'rgba(184, 235, 143)' },
                        { offset: 0, color: 'rgba(6, 244, 231,0)' },
                    ],
                },
            },
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(82, 191, 242, .0)',
                borderColor: 'rgba(82, 191, 242, .2)',
                borderWidth: 2
            }
        },
        
       
        {
            name: '塑膜蓄水模块',
            type: 'bar',
            barWidth : 10,
            // barGap: '200%',
            data: [],
            z:1,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                    {
                        offset: 1,
                        color: 'rgba(3, 181, 243)',
                    },
                    {
                        offset: 0,
                        color: 'rgba(2, 190, 251,0)',
                    },
                    ],
                  
                },
            },
            showBackground: true,
            backgroundStyle:{
                color:'rgba(82, 191, 242, .0)',
                borderColor: 'rgba(82, 191, 242, .2)',
                borderWidth: 2
            }
        },
       
        // 省略其他 series 配置，但对于每个 series，确保调整 x2 和 y2 为横向渐变
    ],

};
   myChart = echarts.init(document.getElementById("xu1") as HTMLElement);
  useFunc().setDefaultOption(myChart)
  console.log(option.series,props.selectValue,'option.series[0].data');
  
  myChart.setOption(option);
});
</script>

<style lang="less" scoped>

.bottom {
  width: 100%;
  height: 84%;
  display: flex;
}
</style>
